<template>
  <canvas ref="canvasRef" @contextmenu="e => e.preventDefault()" />
</template>

<script setup>
import { onMounted, useTemplateRef } from 'vue';

const props = defineProps({
  src: {
    type: String,
    default: ''
  }
});

onMounted(() => {
  drawBg();
});

const canvasRef = useTemplateRef('canvasRef');

const drawBg = () => {
  if (!props.src || !canvasRef.value) return;
  const ctx = canvasRef.value.getContext('2d');
  const img = new Image();
  img.src = props.src;
  img.onload = () => {
    canvasRef.value.width = img.width;
    canvasRef.value.height = img.height;
    ctx.drawImage(img, 0, 0);
  };
};
</script>

<style lang="scss" scoped>

</style>